<template>
	<view class="content">
		<view class="mask-item">
			<view class="item-banner">
				<view class="item-banner-line"></view>
				<view class="item-banner-text">合作品牌</view>
			</view>
			<view class="mask-list-item-image">
				<view class="mask-item-image">
					<image src="../../static/images/index/Mask group (2).png"></image>
				</view>
				<view class="mask-item-image">
					<image src="../../static/images/index/Mask group (2).png"></image>
				</view>
				<view class="mask-item-image">
					<image src="../../static/images/index/Mask group (2).png"></image>
				</view>
			</view>
		</view>
		<view class="project-item">
			<view class="item-banner">
				<view class="item-banner-line"></view>
				<view class="item-banner-text">楼盘套餐</view>
			</view>
			<view class="lptcs">
				<view class="lptc">
					<image class="lptc-image" src="../../static/images/index/build1.png"></image>
					<view class="lptc-box">
						<view class="lptc-title alignment">某某某某某某套餐</view><br>
						<view class="lptc-houseType alignment">150-180m²</view>
						<view class="lptc-currencyType alignment">￥</view>
						<view class="lptc-price alignment">6666</view><br>
						<view class="lptc-theContent alignment">套餐具体</view>
					</view>
				</view>
				<view class="lptc">
					<image class="lptc-image" src="../../static/images/index/build2.png"></image>
					<view class="lptc-box">
						<view class="lptc-title alignment">某某某某某某套餐</view><br>
						<view class="lptc-houseType alignment">150-180m²</view>
						<view class="lptc-currencyType alignment">￥</view>
						<view class="lptc-price alignment">1111</view><br>
						<view class="lptc-theContent alignment">套餐具体</view>
					</view>
				</view>
				<view class="lptc">
					<image class="lptc-image" src="../../static/images/index/build1.png"></image>
					<view class="lptc-box">
						<view class="lptc-title alignment">某某某某某某套餐</view><br>
						<view class="lptc-houseType alignment">150-180m²</view>
						<view class="lptc-currencyType alignment">￥</view>
						<view class="lptc-price alignment">8888</view><br>
						<view class="lptc-theContent alignment">套餐具体</view>
					</view>
				</view>
				<view class="lptc">
					<image class="lptc-image" src="../../static/images/index/build2.png"></image>
					<view class="lptc-box">
						<view class="lptc-title alignment">某某某某某某套餐</view><br>
						<view class="lptc-houseType alignment">150-180m²</view>
						<view class="lptc-currencyType alignment">￥</view>
						<view class="lptc-price alignment">6666</view><br>
						<view class="lptc-theContent alignment">套餐具体</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-banner">
			<view class="footer-banner-item">
				<image src="../../static/images/icon/home_select.png" class="footer-banner-item-image"></image>
				<text class="footer-banner-item-text">首页</text>
			</view>
			<view class="footer-banner-item">
				<image src="../../static/images/icon/time_unselect.png" class="footer-banner-item-image"></image>
				<text class="footer-banner-item-text">预约</text>
			</view>
			<view class="footer-banner-item">
				<image src="../../static/images/icon/me_unselect.png" class="footer-banner-item-image"></image>
				<text class="footer-banner-item-text">我的</text>
			</view>
		</view>
	</view>
</template>

<style>
	* {
		margin: 0 auto;
		padding: 0 0;
	}

	.item-banner {
		width: 375px;
		height: 28px;
		top: 14px;
		left: 5px;
		position: relative;
	}

	.item-banner-line {
		width: 6rpx;
		height: 28rpx;
		background: #3d9c36;
		position: absolute;
		left: 5%;
	}

	.item-banner-text {
		width: 56px;
		height: 20px;
		font-size: 14px;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: CENTER;
		color: #333333;
		line-height: 14px;
		position: absolute;
		left: 9%;
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box; //盒子模型
	}

	.mask-item {
		width: 375px;
		height: 142px;
		background: #ffffff;
	}

	.mask-list-item-image {
		padding-top: 24rpx;
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
	}

	.mask-item-image {
		width: 142px;
		height: 84px;
		padding-left: 20px;
	}

	.mask-item-image image {
		width: 142px;
		height: 84px;
	}

	.lptcs {
		width: 357px;
		transform: translateX(-2%);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.lptc {
		width: 158px;
		height: 292px;
		margin: 14px 4px 4px 4px;
		border-radius: 0px 0px 6px 6px;
	}

	.lptc-image {
		width: 158px;
		height: 210px;
		border-radius: 0px 0px 6px 6px;
	}

	.lptc-box {
		width: 158px;
		height: 81px;
		background: #ffffff;
		border-radius: 0px 0px 6px 6px;
	}

	.lptc-title {
		width: 116px;
		color: #333333;
		font-size: 14px;
		font-weight: bold !important;
		transform: translateX(10%);
	}

	.lptc-houseType {
		width: 75px;
		color: #666666;
		font-size: 14px;
		transform: translateX(12%);
	}

	.lptc-currencyType {
		width: 10px;
		height: 16px !important;
		font-size: 12px !important;
		color: #e54040;
		line-height: 10px !important;
		transform: translateX(250%);
	}

	.lptc-price {
		width: 39px;
		height: 22px !important;
		font-size: 18px !important;
		color: #e54040;
		transform: translateX(70%);
		line-height: 16px !important;
	}

	.lptc-theContent {
		width: 140px;
		height: 28px !important;
		font-size: 12px !important;
		color: #666666;
		line-height: 10px !important;
		transform: translateX(5%);
	}

	.alignment {
		height: 17px;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		line-height: 12px;
		display: inline-block;
	}

	.footer-banner {
		width: 100vw;
		height: 56px;
		display: flex;
		border-top: 1px solid rgba(0, 0, 0, 0.10);
		overflow: hidden;
	}

	.footer-banner-item {
		width: 25px;
		transform: translateY(5px);
	}

	.footer-banner-item-image {
		width: 23px;
		height: 23px;
		z-index: 1;
	}

	.footer-banner-item-text {
		font-size: 12px;
	}
</style>
